import React, { Component } from 'react'

import { Table } from 'antd';
import { connect } from 'dva';
import { Dispatch } from 'typings/redux';

interface P {
  dispatch?: Dispatch;
  loading?: boolean;
  data?: Array<any>;
  height: string;
}

@connect(({ home, loading }) => ({
  data: home.monitor || [],
  loading: loading.effects['home/queryMonitor'],
}))
class Monitor extends Component<P> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'home/queryMonitor' })
  }
  
  render() {

    const column = [{
      title: '设备类型',
      dataIndex: 'kindName',
      width: 200,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 200,
          }
        }
      },
    }, {
      title: '在线',
      dataIndex: 'on',
      width: 130,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 130,
          }
        }
      },
    }, {
      title: '离线',
      dataIndex: 'off'
    }];

    const { data } = this.props;
    const ans = Array.isArray(data) ? data.map((v, i) => ({
      key: i,
      ...v
    })) : []

    return (
      <Table 
        columns={column} 
        dataSource={ans}
        pagination={false}
        style={{ height: '100%' }}
        scroll={{ y: this.props.height }}
        loading={this.props.loading}
        size="small"
      />
    )
  }
}

export default Monitor;